<template>
	<div class="forgot_page layer">
		<van-nav-bar :title="$t('forgot.title')" left-arrow @click-left="$router.go(-1)" :border="false" />
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="dark-ruleForm"
			label-position="top" hide-required-asterisk>
			<el-form-item :label="$t('account')" prop="account" v-if="step == 1">
				<el-input v-model="ruleForm.account" :placeholder="$t('login.accountVerify')"
					@input="(val) => ruleForm.account = val.replace(/[^A-Za-z0-9@_.]/g,'' )">
					<img src="@/assets/images/login/acc.png" slot="prefix" class="icon" />
				</el-input>
			</el-form-item>
			<div v-else>
				<el-form-item :label="type == 1 ? $t('phone') : $t('email')" prop="account">
					<el-input v-model="ruleForm.username" :placeholder="type == 1 ? $t('login.phoneNumber') : $t('login.email')"
						:class="type == 1 ? 'phone_input' :''" disabled>
						<div v-if="type == 1" slot="prefix" class="flex_prefix">
							<img src="@/assets/images/login/phone.png" class="icon" />
							<div class="area_code">
								<span>{{ruleForm.area_code}}</span>
								<i class="el-icon-caret-bottom"></i>
							</div>
						</div>
						<img src="@/assets/images/login/emil.png" slot="prefix" class="icon" v-else />
					</el-input>
				</el-form-item>
				<el-form-item :label="$t('forgot.smsCode')" prop="smsCode">
					<el-input v-model="ruleForm.captcha" :placeholder="$t('forgot.smsCode')">
						<img src="@/assets/images/login/smsCode.png" slot="prefix" class="icon" />
						<div class="downtime" :style="dwonCodeText ? 'color: #fff' : ''" @click="handleSms" slot="suffix">
							{{dwonCodeText ? dwonCodeText : codeText}}
						</div>
					</el-input>
				</el-form-item>
				<el-form-item :label="$t('forgot.newPas')" prop="newpassword">
					<el-input v-model="ruleForm.newpassword" :placeholder="$t('login.password')"
						:type="showPaw1 ? 'text' : 'password'">
						<img src="@/assets/images/login/paw.png" slot="prefix" class="icon" />
						<img :src="require(`@/assets/images/login/${showPaw1 ? 'hide' : 'show'}.png`) " slot="suffix"
							class="paw_icon" @click="showPaw1 = !showPaw1" />
					</el-input>
				</el-form-item>
				<el-form-item :label="$t('forgot.confirmPas')" prop="password2">
					<el-input v-model="ruleForm.password2" :placeholder="$t('login.password')"
						:type="showPaw2 ? 'text' : 'password'">
						<img src="@/assets/images/login/paw.png" slot="prefix" class="icon" />
						<img :src="require(`@/assets/images/login/${showPaw2 ? 'hide' : 'show'}.png`) " slot="suffix"
							class="paw_icon" @click="showPaw2 = !showPaw2" />
					</el-input>
				</el-form-item>
			</div>
		</el-form>
		<el-button class="submit_but" @click="stepNext()" v-if="step == 1">{{$t('next')}}</el-button>
		<div class="step2_but" v-else>
			<el-button class="submit_but prev" @click="step = 1">{{$t('prev')}}</el-button>
			<el-button class="submit_but" @click="submit">{{$t('submit')}}</el-button>
		</div>
		<AreaCode v-if="showAreaCode" v-model="showAreaCode" @change="(val) => ruleForm.area_code = val" />
	</div>
</template>

<script>
	import AreaCode from '@/components/areaCode.vue'
	import {
		smsCheck,
		emsCheck
	} from '@/api/my'
	import {
		smsSend,
		emsSend,
		userResetpwd,
		userRpwPrefix
	} from '@/api/home'
	export default {
		components: {
			AreaCode,
		},
		data() {
			return {
				intimer: null,
				dwonCodeText: '',
				showPaw1: false,
				showPaw2: false,
				showAreaCode: false,
				loginType: 1,
				type: 1,
				step: 1,
				ruleForm: {
					area_code: '1',
					account: '',
					username: '',
					captcha: '',
					newpassword: '',
					password2: '',
				},
			}
		},
		computed: {
			codeText: {
				get() {
					return this.$t('forgot.get')
				},
				set(val) {
					// console.log('val', val);
					return val
				}
				// return this.$t('message.get')
			},
			rules() {
				var validatePass = (rule, value, callback) => {
					var reg = /^(?![a-zA-Z]+$)(?![0-9]+$)[0-9A-Za-z]{8,20}$/
					if (value === '') {
						callback(new Error(this.$t('login.password')))
					} else if (!reg.test(value)) {
						callback(new Error(this.$t('forgot.passValidate')))
					} else {
						callback()
					}
				}
				var validatePass2 = (rule, value, callback) => {
					if (value === '') {
						callback(new Error(this.$t('forgot.password2')))
					} else if (value !== this.ruleForm.newpassword) {
						callback(new Error(this.$t('forgot.twicePassword2')))
					} else {
						callback()
					}
				}
				let obj = {
					// account: [{
					// 	required: true,
					// 	message: this.type == 1 ? this.$t('login.phoneNumber') : this.$t('login.email'),
					// 	trigger: 'change'
					// }],
					account: [{
							required: true,
							message: this.$t('login.accountVerify'),
							trigger: 'change'
						},
						// {
						// 	min: 8,
						// 	max: 20,
						// 	message: this.$t('login.accountVerifyLen'),
						// 	trigger: 'blur'
						// },
					],
					captcha: [{
						required: true,
						message: this.$t('forgot.verification'),
						trigger: 'change'
					}],
					newpassword: [{
						required: true,
						validator: validatePass,
						trigger: 'blur'
					}],
					password2: [{
						required: true,
						validator: validatePass2,
						trigger: 'blur'
					}]
				}
				if (this.type == 2) {
					obj.account.push({
						type: 'email',
						message: this.$t('login.correctEmail'),
						trigger: ['blur', 'change']
					})
				}
				return obj
			}
		},
		watch: {},
		mounted() {
			if (this.$route.query.type) {
				this.type = this.$route.query.type
				this.ruleForm.type = this.type == 1 ? 'mobile' : 'email'
			}
			this.$nextTick(() => {
				this.$refs.ruleForm.clearValidate()
			})
			// console.log('this', this.type);
		},
		methods: {
			async handleSms() {
				this.$refs.ruleForm.validateField('account', async (valid) => {
					if (!valid) {
						if (this.intimer) return
						let res;
						if (this.type == 1) {
							res = await smsSend({
								account: this.ruleForm.account,
								mobile: this.ruleForm.username,
								event: 'resetpwd',
								area_code: this.ruleForm.area_code
							})
						} else {
							res = await emsSend({
								account: this.ruleForm.account,
								email: this.ruleForm.username,
								event: 'resetpwd'
							})
						}
						// console.log('res', res);
						if (res && res.code == 1) {
							let time = 60
							this.codeText = '60s'
							this.intimer = setInterval(() => {
								this.dwonCodeText = (--time) + 's'
								if (time <= 0) {
									clearInterval(this.intimer)
									this.intimer = null
									this.dwonCodeText = '';
									this.codeText = this.$t('forgot.get')
								}
							}, 1000)
							this.$toast.success(res.msg)
						} else {
							this.$toast.fail(res.msg)
						}
					}
				})
			},
			async submit() {
				// console.log('this.ruleForm', this.ruleForm);
				this.$refs.ruleForm.validate(async (valid) => {
					if (valid) {
						// let res;
						// if (this.type == 1) {
						// 	res = await smsCheck({
						// 		mobile: this.ruleForm.account,
						// 		event: 'changemobile',
						// 		captcha: this.ruleForm.captcha
						// 	})
						// } else {
						// 	res = await emsCheck({
						// 		email: this.ruleForm.account,
						// 		event: 'changemobile',
						// 		captcha: this.ruleForm.captcha
						// 	})
						// }
						// if (res && res.code == 1) {
						await this.forgotPas()
						// } else {
						// 	this.$toast.fail(res.msg)
						// }
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			async forgotPas() {
				// console.log('forgotPas', this.ruleForm);
				const res = await userResetpwd({
					...this.ruleForm,
				})
				// console.log('res', res);
				if (res && res.code == 1) {
					this.$toast.success(res.msg)
					this.$router.go(-1)
				} else {
					this.$toast.fail(res.msg)
				}
			},
			async stepNext() {
				this.$refs.ruleForm.validate(async (valid) => {
					if (valid) {
						const res = await userRpwPrefix({
							account: this.ruleForm.account
						})
						// console.log('res', res);
						if (res && res.code == 1) {
							this.ruleForm.area_code = res.data.area_code
							this.ruleForm.username = res.data.mobile || res.data.email
							this.ruleForm.type = res.data.mobile ? 1 : 2
							this.type = res.data.mobile ? 1 : 2
							this.step = 2;
						} else {
							this.$toast.fail(res.msg)
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.forgot_page {
		.downtime {
			color: #0DF5E3;
			font-size: 14px;
		}

		.submit_but {
			margin-top: 40px;
		}

		.step2_but {
			display: flex;
			align-items: center;

			.prev {
				background-color: transparent;
				border: 2px solid #0DF5E3;
				color: #0DF5E3;
			}
		}

		::v-deep .el-input.is-disabled .el-input__inner {
			background-color: transparent;
		}
	}
</style>